<template>
  <div class="box">
    <h1>{{this.form.anniu}}</h1>
    <div class="top">
      <div @click="login" :class="{dian:form.isfalse}">登陆</div>
      <div @click="reg" :class="{dian:!form.isfalse}">注册</div>
    </div>
    <el-form class="center" ref="form" :model="form" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="form.name" class="input"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" class="input" show-password></el-input>
      </el-form-item>

      <el-form-item label="验证码">
        <el-row>
          <el-col :span="18">
            <el-input v-model="form.yanzhengma"></el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="postnum">{{this.form.huoqu}}</el-button>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item>
        <!-- <router-link to="/houtai" tag='el-button' type="primary" class="login" >{{this.form.anniu}}</router-link> -->
        <el-button
          type="primary"
          class="login"
          style="background:#67C23A;"
          @click="loginbtn"
          v-show="form.dz"
        >登陆</el-button>
        <el-button type="primary" class="login" @click="postzhuce" v-show="!form.dz">注册</el-button>
        <!-- <el-button type="primary" class="login" >{{this.form.anniu}}</el-button> -->
        <!-- <el-button type="primary" class="zhuce">{{this.form.anniu}}</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      form: {
        // istrue:true,
        name: "",
        input: "",
        yanzhengma: "",
        huoqu: "登陆码",
        isfalse: true,
        anniu: "登陆",
        password: "",
        ispassword: "666666",
        dz: true
      }
    };
  },
  methods: {
    postnum() {
      axios
        .post("/api/getSms/", {
          username: this.form.name,
          module: "register"
        })
        .then(res => {
          this.form.yanzhengma = res.data.message.substr(11, 6);
        });
    },
    loginbtn() {
      axios
        .post("/api/login/", {
          username: this.form.name,
          password: this.form.password,
          code: this.form.yanzhengma
        })
        .then(res => {
          alert(res.data.message);
          if (res.data.message == "登录成功！！") {
            const user = this.form.name;
            console.log(user);
            this.$router.push({ name: "houtai", params: { user } });
          }
        });
    },
    postzhuce() {
      axios
        .post("/api/register/", {
          username: this.form.name,
          password: this.form.password,
          code: this.form.yanzhengma
        })
        .then(res => {
          alert(res.data.message);
          if (res.data.message == "已注册成功，请重新登录！！") {
            this.form.dz = true;
            this.form.name = "";
            this.form.password = "";
            this.form.yanzhengma = "";
          }
        });
    },
    login() {
      this.form.huoqu = "登陆码";

      this.form.anniu = "登陆";
      this.form.dz = true;
      this.form.name = "";
      this.form.password = "";
      this.form.yanzhengma = "";
    },
    reg() {
      this.form.huoqu = "注册码";

      this.form.anniu = "注册";
      this.form.dz = false;
      this.form.name = "";
      this.form.password = "";
      this.form.yanzhengma = "";
    }
  }
};
</script>

<style scoped>
h1 {
  margin: 0;
  padding: 0;
  text-align: center;
}

.box {
  width: 450px;
  height: 340px;
  border: 1px solid black;
  border-radius: 10px;
  margin: 0 auto;
  padding: 20px;
}
.top {
  display: flex;
}
.top div {
  text-align: center;
  width: 50%;
  height: 60px;
  line-height: 60px;
}
.top div:hover {
  box-sizing: border-box;
  border-bottom: 3px solid black;
  border-radius: 20px;
}
.login {
  margin-left: 10px;
  width: 90%;
}
</style>